<template>
  <view class="container">
    <!-- 用户信息部分 -->
    <view class="user-info">
      <view class="user-content">
        <!-- 圆形头像 -->
        <navigator url="/pages/login/login"><image class="avatar" src="/static/登录头像.webp"></image></navigator>

        <!-- 请登录文本 -->
        <text class="login-text">请登录</text>
      </view>

      
    </view>

		<!-- 订单和工具模块 -->
		<view class="order-tool-section">
			<view class="order-section">
				<view class="section-title">
					<text>我的订单</text>
					<navigator url="/pages/index/order/index">全部订单 ></navigator>
				</view>
				<view class="order-icons">
					<view class="order-item" @click="goTorder">
						<image class="small-image" src="/static/首页 接单.png"></image>
						<text>待接单</text>
						<text class="badge">{{tex}}</text>
					</view>
					<view class="order-item">
						<image class="small-image" src="/static/维修记录.png"></image>
						<text>维修中</text>
						<text class="badge">{{tex1}}</text>
					</view>
					<view class="order-item" @click="goPay">
						<image class="small-image" src="/static/会员缴费.png"></image>
						<text>待缴费</text>
						<text class="badge">{{tex2}}</text>
					</view>
					<view class="order-item">
						<image class="small-image" src="/static/评价.png"></image>
						<text>待评价</text>
						<text class="badge">12</text>
					</view>
				</view>
			</view>

			<view class="tool-section">
				<view class="section-title">服务与工具</view>
				<view class="tool-icons">
					<view class="tool-item">
						<image class="small-image" src="/static/福利中心.png"></image>
						<text>福利中心</text>
					</view>
					<view class="tool-item">
						<image class="small-image" src="/static/客服咨询绿.png"></image>
						<text>客服咨询</text>
					</view>
					<view class="tool-item">
						<image class="small-image" src="/static/定位.png"></image>
						<text>地址管理</text>
					</view>
					<view class="tool-item">
						<image class="small-image" src="/static/投诉举报.png"></image>
						<text>投诉反馈</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 优选服务部分 -->
		<view class="service-section">
			<view class="section-title">
				<text>优选服务</text>
			</view>
			<view class="service-list">
				<view class="service-item" v-for="item in serviceItems" :key="item.id">
					<image class="service-image" :src="item.image"></image>
					<view class="service-desc">
						<text class="service-name">{{ item.name }}</text>
						<text class="service-tag">{{ item.tag }}</text>
						<button class="book-btn">立即预约</button>
					</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				tex: 0,
				tex1: 0,
				tex2: 0,
				serviceItems: [{
						id: 1,
						image: '/static/阳台漏水.png',
						name: '阳台漏水\n',
						tag: '免费上门制定方案'
					},
					{
						id: 2,
						image: '/static/灶具维修.png',
						name: '灶具维修\n',
						tag: '保修30天'
					},
					{
						id: 3,
						image: '/static/疏通马桶.png',
						name: '疏通马桶\n',
						tag: '不通不收费'
					},
					{
						id: 4,
						image: '/static/阳台漏水.png',
						name: '阳台漏水\n',
						tag: '免费上门制定方案'
					},
					{
						id: 5,
						image: '/static/灶具维修.png',
						name: '灶具维修\n',
						tag: '保修30天'
					},
					{
						id: 6,
						image: '/static/疏通马桶.png',
						name: '疏通马桶\n',
						tag: '不通不收费'
					}
				],
				pendingOrders: [{
						id: 1,
						name: '空调维修',
						status: '待接单',
						time: '2024-10-05 14:00'
					},
					{
						id: 2,
						name: '马桶维修',
						status: '待接单',
						time: '2024-10-06 10:30'
					}
				]
			};
		},
		onLoad() {
			this.refreshInterval = setInterval(() => {
				this.getlist()
			}, 30000);
		},
		onUnload() {
			clearInterval(this.refreshInterval);
		},
		onShow() {
			const Name = uni.getStorageSync('msg');
			if (Name == "成功") {
				this.getlist()
			}
			this.getlist()

		},
		methods: {
			goTorder() {
				uni.navigateTo({
					url: '/pages/order/order'
				});
			},
			goPay() {
				if(this.tex2 == 0){
					uni.showToast({
						title: '请先下单~',
						icon: 'error',
						duration: 2000
					});
				}else{
					uni.navigateTo({
						url: '/pages/pay/pay',
					});
				}
			},
			getlist() {
				var taht = this;
				uni.request({
					url: 'http://localhost:8080/ry/orders/selectAll',
					method: 'GET',
					header: {
						'Content-Type': 'application/json'
					},
					success: function(res) {
						// 请求成功的回调函数
						if (res.data.code == 200) {
							if (res.data.data.length != 0) {
								console.log("成功",res.data.data[0])
								var list = []
								var list2 = []
								var list3 = []
								for(var a = 0 ;a < res.data.data.length;a++){
									if(res.data.data[a].state == 0){
										list.push(res.data.data[a])
									}else if(res.data.data[a].state == 1){
										list2.push(res.data.data[a])
									}else if(res.data.data[a].state == 2){
										list3.push(res.data.data[a])
									}
								}
								console.log(list)
								console.log(list2)
								console.log(list3)
								taht.tex = list.length
								taht.tex1 = list2.length
								taht.tex2 = list3.length
							}
						}
					},
				});
			}
		}
	};
</script>

<style scoped>
	/* 容器样式 */
	.container {
		background-color: #f5f5f5;
		height: 100%;
		padding: 10px 15px;
	}

	/* 用户信息样式 */
	.user-info {
		background: linear-gradient(90deg, #8364FF, #629DFF);
		padding: 20px;
		display: flex;
		justify-content: center;
		/* 调整这里确保内容居中 */
		align-items: center;
		flex-direction: column;
		/* 将其改为纵向排列 */
		border-radius: 10px;
		margin-bottom: 15px;
	}

	/* 用户内容居中对齐 */
	.user-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 圆形头像样式 */
	.avatar {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-bottom: 10px;
	}

	.login-text {
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		/* 添加文本居中 */
	}

	/* 用户操作按钮样式 */
	.user-actions {
		font-size: 18px;
		color: #fff;
		position: absolute;
		right: 10px;
		top: 10px;
	}

	/* 订单和工具模块样式 */
	.order-tool-section {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 20px;
	}

	.section-title {
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		padding-bottom: 10px;
		border-bottom: 1px solid #f0f0f0;
		font-size: 13px;
	}

	.order-icons,
	.tool-icons {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.order-item,
	.tool-item {
		width: 22%;
		text-align: center;
		position: relative;
	}

	.iconfont {
		font-size: 24px;
		color: #629DFF;
	}

	.order-item text,
	.tool-item text {
		margin-top: 8px;
		display: block;
		font-size: 10px;
	}

	.badge {
		position: absolute;
		top: 0;
		right: 3px;
		background-color: #ff3b30;
		color: #fff;
		border-radius: 50%;
		padding: 1px 3px;
		font-size: 10px;
	}

	/* 优选服务部分样式 */
	.service-section {
		margin-top: 10px;
	}

	.service-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.service-item {
		width: 48%;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 15px;
	}

	.service-image {
		width: 100%;
		height: 120px;
		object-fit: cover;
	}

	.service-desc {
		padding: 10px;
	}

	.service-name {
		font-weight: bold;
		margin-bottom: 5px;
		font-size: 14px;
	}

	.service-tag {
		color: #999;
		font-size: 12px;
	}

	.book-btn {
		width: 100%;
		padding: 10px;
		background-color: #629DFF;
		color: #fff;
		border: none;
		border-radius: 5px;
		text-align: center;
		margin-top: 10px;
		font-size: 14px;
	}

	.small-image {
		width: 24px;
		height: 24px;
	}
</style>